@import (reference) './_vars.less';
@import (reference) './_mixin.less';

@nav-height: 46px;

.nav {
    position: relative;
    z-index: 80;
    width: @size-nav-width;
    height: 100%;
    background-color: @color-nav;
    background-color: var(--color-nav);
    .animation(fade-in 1.6s both);
}
.nav-inner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    font-size: 16px;
    text-align: center;
    line-height: @nav-height;
    .transform(translateY(-50%));
}
.nav-item {
    position: relative;
    display: block;
    color: #fff;
    height: @nav-height;
    .transition(background-color 0.4s ease);

    &:hover .nav-text,
    &.active .nav-text {
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 4px;
        min-width: @size-nav-width + 4px;
        border-radius: 0 6px 6px 0;
    }
    &:hover {
        .nav-text {
            background-color: #464646;
        }
    }
    &.active {
        .nav-text {
            background-color: #676767;
        }
    }
}
.nav-text {
    display: block;
    height: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    .ellipsis();
}

.nav-mobile {
    display: none;
}
.nav-mobile-item {
    .flex-item();
}
.nav-mobile-title {
    color: #eaeaea;
    line-height: @size-mobile-nav-height;
    .ellipsis();
}
.open-panel {
    width: @size-mobile-nav-height;
    padding: 0 10px;
    color: #eaeaea;
    font-size: 18px;
    line-height: @size-mobile-nav-height;
    background-color: transparent;
    border: none;
    box-sizing: border-box;

    &:focus,
    &:active {
        background-color: #414141;
    }
}


@media screen and (max-width: @size-mobile-screen-width) {
    .nav {
        width: auto;
        height: auto;
    }
    .nav-inner {
        position: static;
        height: @size-mobile-nav-height;
        font-size: 13px;
        line-height: @size-mobile-nav-height;
        background-color: #333;
        opacity: 0.8;
        .flexbox();
        .transform(none);
    }
    .nav-item {
        width: 100%;
        height: @size-mobile-nav-height;
        .flex-item();

        &:hover .nav-text,
        &.active .nav-text {
            position: static;
            min-width: auto;
            padding-left: 8px;
            border-radius: 0;
        }
    }

    .nav-mobile {
        height: @size-mobile-nav-height;
        .flexbox();
        .justify-content(space-between);
    }
}
